<!-- 注册页 -->
<template>
	<view class="re_content">
		<!-- 返回上一页 -->
		<view class="re_return">
			<image :src="HTTP_IMG_UTL+'fanhui.png'" style="width: 28rpx;height: 40rpx;" mode="" @click="handelReturn" />
			<view></view>
		</view>
		<!-- 注册成为GLUZ会员 文字 -->
		<view class="re_GLUZ_title">
			<view>
				<view>
					<span style="font-size: 50rpx;font-weight: bold;">{{$t('忘记密码')}}</span>
				</view>
			</view>
		</view>
		<!-- form表单 -->
		<view class="re_form">
			<u-form labelPosition="top" :model="model" ref="uForm">

				<u-form-item :label="$t('手机号码')" prop="mobile">
					<view class="re_mobile">
						<view class="re_mobile_87" @click="handeleAreaCode">+{{AreaCode}}</view>
						<image :src="HTTP_IMG_UTL+'register_223@2x.png'"
							style="width: 20rpx;height: 12rpx;margin-right: 20rpx;" mode="" />
						<view class="re_line" style="margin-right: 20rpx;"></view>
						<u-input type="number" maxlength="11" v-model="model.mobile" :placeholder="$t('请输入手机号')"
							clearable :border="border" />
					</view>
				</u-form-item>
				<u-form-item :label="$t('邮箱')" prop="email" v-if="indexID===1" key="email">
					<u-input v-model="model.email" :placeholder="$t('请输入邮箱')" clearable :border="border" />
				</u-form-item>
				<u-form-item :label="$t('登录密码')" prop="password">
					<u-input :type="type" v-model="model.password" :placeholder="$t('8-20位字母、数字，符号组合')" clearable
						:border="border" />
				</u-form-item>
				<u-form-item :label="$t('再次确认密码')" prop="newpassword">
					<u-input :type="type" v-model="model.newpassword" :placeholder="$t('请再次确认密码')" clearable
						:border="border" />
				</u-form-item>

				<u-form-item :label="$t('验证码')" prop="captcha">
					<view class="re_VerificationCode">
						<u-input type="number" v-model="model.captcha" :placeholder="$t('请输入验证码')" :border="border" />
						<view class="re_ver" @click.stop="sendVerificationCode">
							<view class="re_line"></view>
							<view>{{ isCounting ? `${countdown}S` : $t('获取验证码') }}</view>
						</view>
					</view>
				</u-form-item>

			</u-form>
		</view>

		<!-- 注册按钮 -->
		<view class="re_but">
			<view style="width: 70%;">
				<u-button class="custom-style" :disabled="isDisabled" :loading="isLoading" @click="handelSubmit">
					{{$t('确认')}}
				</u-button>
			</view>
		</view>
		<!-- <view class="existence" @click="handelAlreadyhaveanaccount">{{$t('已有帐号，立即前往登录')}}</view> -->
		<!-- 底部弹窗 -->
		<u-picker v-model="iSshow" mode="selector" :range="selectorObj" range-key="name" :confirm-text="$t('确定')"
			:cancel-text="$t('取消')" @confirm="handelConfirm" :default-selector="[AreaCodeIndex]" />
		<view class="backColor"></view>
	</view>
</template>

<script>
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	export default {
		data() {
			return {
				HTTP_IMG_UTL,
				type: 'password', //密码输入框password模式
				AreaCode: '86', //默认选择的code
				iSshow: false, //控制底部弹窗显示与隐藏
				selectorObj: [{ //code数组
					name: '86'
				}, {
					name: '7'
				}], //切换语言
				isCounting: false, //短信验证码显示文字控制隐藏显示
				countdown: 60, //验证码倒计时60秒
				timer: null, //setInterval
				isDisabled: false, //disabled  防抖
				isLoading: false, //loading
				border: false, //控制隐藏input外边框
				model: { //表单
					agent_code: '', //邀请码
					mobile: '', //手机号码
					password: '', //确认密码
					newpassword: '', //再次确认密码
					captcha: '',
					email: '', //验证码
				},
				test: '测试',
				language: [{
					name: '中'
				}, {
					name: 'RU'
				}], //切换语言
				lang: 'zh', //默认语言
				indexID: 0, //下标
				nowLang: 'zh', //获取协议接口使用的当前语言
				xyContent2: '', //隐私内容
				langs: 'zh',
				AreaCodeIndex: 0
			}
		},
		onShow() {
			this.nowLang = this.$i18n.locale
			this.getLang()
		},
		methods: {
			// 提交注册
			handelSubmit() {
				const regex = /^[1][3-9][0-9]{9}$/;
				if (this.model.mobile === '') {
					uni.showToast({
						title: this.$t('请输入手机号'),
						icon: 'none',
						duration: 1000
					})
				} else if (this.lang === 'zh') { //如果是中国用户判断
					if (!regex.test(this.model.mobile)) { //正则判断手机号是否正确
						uni.showToast({
							title: this.$t('手机号码不正确'),
							// title:'手机号码不正确',
							icon: 'none',
							duration: 1000
						})
					} else if (this.model.password.length < 8) { //判断密码是否大于8位
						uni.showToast({
							title: this.$t('密码长度必须大于8位'),
							icon: 'none',
							duration: 1000
						})
					} else if (this.model.newpassword.length < 8) {
						uni.showToast({
							title: this.$t('密码长度必须大于8位'),
							icon: 'none',
							duration: 1000
						})
					} else if (this.model.password !== this.model.newpassword) {

						uni.showToast({
							title: this.$t('两次密码不一致'),
							icon: 'none',
							duration: 1000
						})
					} else if (this.model.captcha === '') { //判断验证码是否为空
						uni.showToast({
							title: this.$t('请输入验证码'),
							icon: 'none',
							duration: 1000
						})
					} else {
						this.Submit()
					}
				} else if (this.lang === 'ru') { //如果是俄罗斯用户判断
					if (this.model.mobile.length !== 10) { //正则判断手机号是否正确
						uni.showToast({
							title: this.$t('手机号码不正确'),
							icon: 'none',
							duration: 1000
						})
					} else if (this.model.password.length < 8) { //判断密码是否大于8位
						uni.showToast({
							title: this.$t('密码长度必须大于8位'),
							icon: 'none',
							duration: 1000
						})
					} else if (this.model.newpassword.length < 8) {
						uni.showToast({
							title: this.$t('密码长度必须大于8位'),
							icon: 'none',
							duration: 1000
						})
					} else if (this.model.password !== this.model.newpassword) {

						uni.showToast({
							title: this.$t('两次密码不一致'),
							icon: 'none',
							duration: 1000
						})
					} else if (this.model.captcha === '') { //判断验证码是否为空
						uni.showToast({
							title: this.$t('请输入验证码'),
							icon: 'none',
							duration: 1000
						})
					} else if (this.model.email === '') { //判断邮箱是否为空
						uni.showToast({
							title: this.$t('请输入邮箱'),
							icon: 'none',
							duration: 1000
						})
					} else {
						this.Submit()
					}
				}

			},
			// 调注册接口
			Submit() {
				this.isDisabled = true
				this.isLoading = true
				this.$u.api.user.resetpwd({
					mobile: this.model.mobile,
					email: this.model.email,
					// type: this.form.country === '0' ? 'mobile' : 'mobile', //拷贝过来原始代码是这样写的，有点der
					type: 'mobile',
					country: this.lang === 'zh' ? '0' : '1',
					newpassword: this.model.newpassword,
					captcha: this.model.captcha
				}).then(res => {
					this.isDisabled = false
					this.isLoading = false
					this.$u.toast(this.$t('操作成功'))
					setTimeout(() => {
						this.$u.route({
							url: '/pages/user/login/login',
						})
					}, 1500)
				}).catch(err => {
					this.isDisabled = false
					this.isLoading = false
				})
			},
			// 选择区号
			handeleAreaCode() {
				// 控制底部弹窗的弹出与收起
				this.iSshow = !this.iSshow
			},
			// 选择语言
			handelConfirm(e) {
				this.AreaCodeIndex = e[0]
				// let index = e[0]
				// 获取选择的下标
				// this.indexID = index
				// 根据下标切换选择的+86或+7
				this.AreaCode = this.selectorObj[e[0]].name

			},
			// 点击获取短信验证码文字
			sendVerificationCode() {
				// 判断手机号是否为空
				if (this.model.mobile === '') {
					this.$u.toast(this.$t('请输入手机号'));
					return
				}
				if (this.isCounting) return;
				this.getPhoneNumberCode() //调接口发送短信

			},
			// 验证码倒计时逻辑
			startCountdown() {
				this.isCounting = true;
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						this.isCounting = false;
						this.countdown = 60;
					}
				}, 1000);
			},
			// 调接口发送短信验证码
			getPhoneNumberCode() {
				let data = {
					mobile: this.AreaCode === '86' ? this.model.mobile : this.AreaCode + this.model.mobile, //手机号码
					event: this.lang === 'zh' ? 'resetpwd' : 'resetpwd_ru', //事件名称：注册=register，重置密码=resetpwd
					langs: this.lang,
					email: this.model.email
				}
				// 调用发送验证码接口 'sendCaptcha'
				this.$u.api.user.sendCaptcha(data).then(res => {
					// 验证码倒计时逻辑
					this.startCountdown();
				})
			},
			// 切换语言
			handelLang(index) {
				// 设置手机号选择的+86或+7
				this.AreaCode = this.selectorObj[index].name
				this.indexID = index
				// 切换语言
				if (index === 0) {
					this.lang = 'zh'
					this.langs = 'zh'
				} else {
					this.lang = 'ru'
					this.langs = 'ru'
				}
				/** 设置语言 */
				uni.setStorage({
					key: 'lang',
					data: this.lang
				})
				// 更新语言
				getApp().globalData.lang = this.lang
				this.$i18n.locale = this.lang
			},
			// 返回上一页
			handelReturn() {
				uni.navigateBack()
			},
			// 获取当前缓存语言
			getLang() {
				uni.getStorage({
					key: 'lang',
					success: res => {
						if (res.data == 'zh') {
							this.indexID = 0
							this.lang = 'zh'
						} else {
							this.indexID = 1
							this.lang = 'ru'
						}
					}
				});
			},
			// 跳转至服务协议页面
			handelePrivacy() {
				this.$u.route({
					url: '/pages/user/privacy/privacy',
					params: {
						type: 'GLUZ用户账号服务协议'
					}
				})
			},
			// 跳转至隐私政策
			showXy2() {
				this.$u.api.basic.getContentData({
					type: "隐私政策",
					nowLang: this.nowLang
				}).then(res => {
					this.xyContent2 = res
				})
				// this.showPopup2 = true
			},
			// 已有账号
			handelAlreadyhaveanaccount() {
				uni.navigateBack()
			}

		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}

	}
</script>


<style lang="scss" scoped>
	.backColor {
		width: 100%;
		height: 742rpx;
		background: linear-gradient(180deg, #E1F8C7 -3%, rgba(255, 255, 255, 0.2) 56%);
		position: absolute;
		top: 0;
		z-index: -1;
	}

	.existence {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		color: #A4A4A4;
		margin-top: 28rpx;
		margin-bottom: 138rpx;
	}

	.re_mobile_87 {
		margin-right: 20rpx;
	}

	.re_mobile {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.re_ver {
		width: 210rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.re_line {
		width: 2rpx;
		height: 30rpx;
		// background-color: #FF4E00;
		background: #000000;
	}

	.re_VerificationCode {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		cursor: pointer;
	}

	.custom-style {
		background-color: #000000;
		color: #ffffff;
	}

	.re_but {
		margin: 124rpx 0rpx 0rpx 0rpx;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.re_Privacy {
		width: calc(100% - 80rpx);
		display: flex;
		margin-top: 20rpx;
		justify-content: flex-start;
		align-items: center;
		font-size: 20rpx;
		flex-wrap: wrap;
	}

	.re_form {
		width: calc(100% - 80rpx);
	}

	.active {
		color: #A5A5A5;
		width: 116rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		border: 1rpx solid #E2E2E2;
		border-radius: 10rpx;
	}

	.itemActive {
		width: 116rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid #707070;
		border-radius: 10rpx;
		color: #FFFFFF;
		background: linear-gradient(to right, #d2ef91, #e6f5cd)
	}

	.re_lang_ri {
		width: 250rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-weight: bold;
	}

	.re_lang {
		margin-top: 68rpx;
		width: calc(100% - 100rpx);
		display: flex;
		justify-content: flex-end;
	}

	.re_GLUZ_title {
		margin-top: 8rpx;
		width: calc(100% - 80rpx);
		// height:60rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-bottom: 150rpx;
	}

	.re_return {
		margin-top: 110rpx;
		width: calc(100% - 60rpx);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.re_content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		// background-color: #ffffff;
	}
</style>